<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="基础资料" :column="2" border>
                <el-descriptions-item label="NFT头图" :span="2">
                    <div class="imgItemBox">
                        <a target="_black" :href="oDetail.nftImage"><img :src="oDetail.nftImage"></a>
                    </div>
                </el-descriptions-item>
            <el-descriptions-item label="ID">{{oDetail.bornId}}</el-descriptions-item>
            <el-descriptions-item label="锻造主链">--</el-descriptions-item>
            <el-descriptions-item label="NFT名称">{{oDetail.title}}</el-descriptions-item>
            <el-descriptions-item label="合约地址">{{oDetail.contractAddress}}</el-descriptions-item>
            <el-descriptions-item label="发布平台">{{oDetail.publishingPlatform}}</el-descriptions-item>
            <el-descriptions-item label="结算货币">{{oDetail.settlementCurrency}}</el-descriptions-item>
            <el-descriptions-item label="代币标准">--</el-descriptions-item>
            <el-descriptions-item label="锻造时间">{{oDetail.bornTime}}</el-descriptions-item>
            <template v-if="oDetail.sellModel==1">
                <el-descriptions-item label="NFT拍卖初始价" v-if="oDetail.initialPrice">{{oDetail.initialPrice.decimalTwoString}}</el-descriptions-item>
                <el-descriptions-item label="NFT拍卖成交价" v-if="oDetail.transactionPrice">{{oDetail.transactionPrice.decimalTwoString}}</el-descriptions-item>
                <el-descriptions-item label="拍卖开始时间">{{oDetail.startTime}}</el-descriptions-item>
                <el-descriptions-item label="拍卖结束时间">{{oDetail.endTime}}</el-descriptions-item>
                <el-descriptions-item label="拍卖状态">
                    <el-tag type="danger" v-if="oDetail.sellStatus==0">预告</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==10">拍卖中</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==20">交易成功</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==30">交易失败</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==40">交易中</el-tag>
                </el-descriptions-item>
            </template>
            <template v-if="oDetail.sellModel==0">
                <el-descriptions-item label="NFT售价" v-if="oDetail.initialPrice">{{oDetail.initialPrice.decimalTwoString}}</el-descriptions-item>
                <el-descriptions-item label="寄售状态">
                    <el-tag type="danger" v-if="oDetail.sellStatus==0">预告</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==10">出售中</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==20">交易成功</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==30">交易失败</el-tag>
                    <el-tag type="danger" v-else-if="oDetail.sellStatus==40">交易中</el-tag>
                </el-descriptions-item>
            </template>
            <el-descriptions-item label="寄售发布时间" :span="2">{{oDetail.createTime}}</el-descriptions-item>
        </el-descriptions>
        <br/><br/>
        <el-descriptions labelClassName="mysdItemLable" title="NFT创作者与出售者信息" :column="3" border>
            <el-descriptions-item label="NFT创作者ID">{{oDetail.bornUserId}}</el-descriptions-item>
            <el-descriptions-item label="NFT创作者账户名">{{oDetail.bornUserName}}</el-descriptions-item>
            <el-descriptions-item label="NFT创作者钱包地址">{{oDetail.bornAddress}}</el-descriptions-item>
            <el-descriptions-item label="NFT出售者ID">{{oDetail.ownerUserId}}</el-descriptions-item>
            <el-descriptions-item label="NFT出售者账户名">{{oDetail.ownerName}}</el-descriptions-item>
            <el-descriptions-item label="NFT出售者钱包地址">{{oDetail.ownerAddress}}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <div style="padding:0 0 50px 0" v-if="oDetail.sellModel==1">
            <div class="el-descriptions__title" style="margin-bottom:20px">NFT拍卖出价记录</div>
            <my-table :loading="loading" :lists="tableData" @pageChange="handleChange" :sequence="true" :page='page'>
                <el-table-column property="createTime" label="时间"></el-table-column>
                <el-table-column property="" label="ID">--</el-table-column>
                <el-table-column property="bidderName" label="账户名"></el-table-column>
                <el-table-column property="bidderAddress" label="钱包地址"></el-table-column>
                <el-table-column property="title" label="出价金额">
                    <template slot-scope="scope">
                        {{scope.row.bidAmount?scope.row.bidAmount.decimalTwoString:'--'}}
                    </template>
                </el-table-column>
            </my-table>
        </div>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import {
  get_trade_detail,
  get_bidLog_list
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack
    },
    data(){
        return{
            id:'',
            oDetail:{},
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
        this.getList()
    },
    methods:{
        async getData(){ 
            const res = await get_trade_detail(this.id)
            if(res.success){
                this.oDetail = res.data
            }
        },
        getList(){
            this.loading = true
            get_bidLog_list({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                sellRecordId:this.id
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
            })
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>